<template>
	<div class="timeline">
		<u-navbar :is-back="false" :border-bottom="false" :background="background">
			<view class="u-flex" style="padding-right: 40rpx;" slot="right">
				<view class="camera u-flex u-row-center" @click="toPublish">
					<u-icon name="camera-fill" color="#000000" size="48"></u-icon>
				</view>
			</view>
		</u-navbar>
		<!-- <dcp-scroller :isLoading="loadStatus === 'loading'" @refresh="getList"> -->
		<timeline-list :profile="wxUserInfo.headimgurl" ref="timeLine" :showPublish="false" :storeNo="storeNo"
			:loadStatus="loadStatus" noMargin loadOutData :showProfile="false" :list="listData" :condition="condition"
			:limit="20" @load="getList">
		</timeline-list>
		<!-- </dcp-scroller> -->
		<uni-load-more :status="loadStatus" v-if="
        loadStatus !== 'noMore' ||
        (loadStatus === 'noMore' && listData.length !== 0)
      ">
		</uni-load-more>
		<u-empty text="无历史记录" mode="history" v-else-if="loadStatus === 'noMore' && listData.length === 0"></u-empty>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	function noPullDown(selector) {
		var overscroll = function(el) {
			el.addEventListener('touchstart', function() {
				var top = el.scrollTop,
					totalScroll = el.scrollHeight,
					currentScroll = top + el.offsetHeight;
				//If we're at the top or the bottom of the containers
				//scroll, push up or down one pixel.
				//
				//this prevents the scroll from "passing through" to
				//the body.
				if (top === 0) {
					el.scrollTop = 1;
				} else if (currentScroll === totalScroll) {
					el.scrollTop = top - 1;
				}
			});
			el.addEventListener('touchmove', function(evt) {
				//if the content is actually scrollable, i.e. the content is long enough
				//that scrolling can occur
				if (el.offsetHeight < el.scrollHeight)
					evt._isScroller = true;
			});
		}
		overscroll(document.querySelector(selector));
		document.body.addEventListener('touchmove', function(evt) {
			//In this case, the default behavior is scrolling the body, which
			//would result in an overflow.  Since we don't want that, we preventDefault.
			if (!evt._isScroller) {
				evt.preventDefault();
			}
		});
	}
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff',
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				listData: [],
				page: {
					pageNo: 1,
					rownumber: 10,
					total: 0
				},
				storeNo: '',
				loadStatus: "",
			}
		},
		computed: {
			condition() {
				if (this.storeNo) {
					return [{
						colName: 'store_no',
						ruleType: 'eq',
						value: this.storeNo
					}, ]
				} else {
					return []
				}
			},
			wxUserInfo() {
				return this.$store.getters.getWxUser
			}
		},
		methods: {
			toPublish() {
				uni.navigateTo({
					url: '/pages/publish/publish'
				})
			},
			refresh() {
				this.getList()
			},
			getList(loadType) {
				const serviceName = this.srvInfo?.serviceName || 'srvportal_friends_circle_select'
				const appName = this.srvInfo?.appName || 'bxportal'
				let req = {
					"serviceName": serviceName,
					"colNames": ["*"],
					"condition": [],
					"page": {
						"pageNo": this.page.pageNo,
						"rownumber": this.page.rownumber
					}
				}
				if (this.storeNo) {
					req.condition.push({
						colName: 'store_no',
						ruleType: 'eq',
						value: this.storeNo
					})
				}
				if (Array.isArray(this.condition) && this.condition.length > 0) {
					req.condition = [...req.condition, ...this.condition]
				}
				if (loadType === 'loadmore') {
					if (this.loadStatus === 'loading') {
						return
					}
				}
				this.loadStatus = 'loading'
				this.$fetch('select', serviceName, req, appName).then(res => {
					if (res.success) {
						if (loadType === 'loadmore') {
							this.listData = [...this.listData, ...res.data]
						} else {
							this.listData = res.data
						}
						this.page = res.page
						if (res.page.total > res.page.pageNo * res.page.rownumber) {
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					} else {
						this.loadStatus = 'more'
					}
				})
			},
		},

		// 页面周期函数--监听页面加载
		onLoad(option) {
			if (option.storeNo) {
				this.storeNo = option.storeNo
			}
			if (option.title) {
				uni.setNavigationBarTitle({
					title: option.title
				})
			}
			this.getList()
		},
		mounted() {
			noPullDown('.timeline')
		},
		// onPullDownRefresh() {
		// 	uni.stopPullDownRefresh();
		// },
		// 页面处理函数--监听用户上拉触底
		onReachBottom() {
			if (this.loadStatus === 'more') {
				this.page.pageNo++
				this.getList('loadmore')
			}
		}
	};
</script>
<style>
	html, body, #app, .wx-pages {
	  padding: 0;
	  margin: 0;
	  height: 100%;
	  overflow: hidden;
	  -webkit-overflow-scrolling: touch;
	}
	.timeline {
		background-color: #fff;
	}
</style>
